<template>
  <div>
    app2222
    <!-- <Son2 v-if='flag' /> -->
    <Son2/>
    <Son/>
 
    <button @click="handlerFlag">handlerFlag</button>
  </div>
</template>

<script>
import Son2 from "./components/Son2.vue";
import Son from './components/Son.vue'
// 异步引入
/* const Son2 = defineAsyncComponent(() => {
  return import("./components/Son2.vue");
}); */
import { ref, provide, reactive, defineAsyncComponent } from "vue";

export default {
  // name:'App2',
  components: {
    Son2,
    Son
  },
  setup() {
    let flag = ref(true);
    let car = reactive({
      name: "本田",
      cost: 10,
    });
    provide("car", car);
    function handlerFlag() {
      // ref定义的直接这么改是不能响应式的！
      // flag = !flag;
      flag.value = !flag;
    }
    return {
      handlerFlag,
      flag,
    };
  },
};
</script>

<style>
</style>